<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.1.min.js"></script>
		<script>
			
			/**
			 * 页面加载时触发
			 */
			window.onload = function(){
				//初始化websocket
				initWs();
			}
			
			/**
			 * 初始化websocket连接
			 */
			var ws;
			function initWs(){
				
				//判断浏览器是否支持WebSocket技术
				if(window.WebSocket){
					//支持websocket 
					
					//连接websocket服务器
					ws = new WebSocket("ws://localhost:8080/gobank");
					
					//给ws对象设置回调方法
					ws.onopen = function(){
						console.log("已经成功连接了服务器....");
						showMsg("成功连接服务器！");
					}
					
					ws.onclose = function(){
						console.log("与服务器的连接已经断开....");	
						showMsg("与服务器断开连接！");
					}
					
					ws.onerror = function(e){
						console.log("与服务器连接发生异常....")
					}
					
					ws.onmessage = function(resp){
						console.log("接收到服务器的消息：" + resp.data);
						//展示到聊天框
						showMsg("other:" + resp.data);
					}
				} else {
					alert("骚瑞，您的浏览器不支持WebSocket，请更换更高级的浏览器");
				}
				
			}
			
			/**
			 * 发送消息
			 */
			function sendMsg(){
				var msg = $("#msg").val();
				
				if(msg == null || msg.trim() == ""){
					alert("发送消息不能为空！");
					return;
				}
				
				//展示到聊天框
				showMsg("我：" + msg);
				
				//清空输入框
				$("#msg").val("");
				
				//将msg发送到服务端
				sendMsgToServer(msg);
			}
			
			/**
			 * 展示一些内容到DIV中
			 */
			function showMsg(msg){
				$("#msgs").append(msg + "<br/>");
			}
			
			/**
			 * 发送消息到服务端
			 */
			function sendMsgToServer(msg){
				if(ws){
					ws.send(msg);//只能传递字符串
				} else {
					alert("websocket连接异常！");
				}
			}
			
		</script>
	</head>
	<body>
		
		<!-- 聊天的消息列表 -->
		<div id="msgs" style="margin: 20px; border: 1px solid #000000; width: 600px; height: 500px;">
			
		</div>
		
		
		<input id="msg" style="margin: 20px;"/> <button onclick="sendMsg()">发送</button>
		
	</body>
</html>
